<template>
  <div class="contain">
    <div class="header">
      <div class="inputContain" @click="toSearch">
        <div class="picture">
          <img src="../assets/search-light.png" alt="">
        </div>
        <input type="text">
      </div>

      <div class="cart">
        <img src="../assets/cart.png" alt="">
      </div>
      <div class="order">
        <img src="../assets/order.png" alt="">
      </div>
      <div class="more" @click="show = true">
        <img src="../assets/more.png" alt="">
      </div>

      <!-- <van-action-sheet  v-model:show="show" :actions="actions" @select="onSelect" /> -->

      <van-action-sheet v-model:show="show" title="更多功能" style="background-color: rgb(243, 243, 243);">
        <div class="content">
          <div class="moreItem">
            <div class="moreItem-picture">
              <img src="../assets/gw-light.png" alt="">             
            </div>
            <div class="moreItem-name">购物车</div>
          </div>
          <div class="moreItem">
            <div class="moreItem-picture">
              <img src="../assets/dd-light.png" alt="">            
            </div>
            <div class="moreItem-name">订单</div>
          </div>
          <div class="moreItem">
            <div class="moreItem-picture">
              <img src="../assets/kefu.png" alt="">           
            </div>
            <div class="moreItem-name">客服</div>
          </div>
          <div class="moreItem">
            <div class="moreItem-picture">
              <img src="../assets/kaquan.png" alt="">           
            </div>
            <div class="moreItem-name">卡券</div>
          </div>
          <div class="moreItem">
            <div class="moreItem-picture">
              <img src="../assets/xinyuan.png" alt="">           
            </div>
            <div class="moreItem-name">心愿单</div>
          </div>
          <div class="moreItem">
            <div class="moreItem-picture">
              <img src="../assets/dizhi.png" alt="">           
            </div>
            <div class="moreItem-name">地址管理</div>
          </div>
          <div class="moreItem">
            <div class="moreItem-picture">
              <img src="../assets/huiyuan.png" alt="">           
            </div>
            <div class="moreItem-name">小红卡会员</div>
          </div>
        </div>
      </van-action-sheet>
    </div>

    <div class="carousel">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item>
          <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F0107e35b14d3eca801202e604a8fdb.jpg%402o.jpg&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652852388&t=2388efe6bbdc34294dc1d72a97898bf0" alt="">
        </van-swipe-item>
        <van-swipe-item>
          <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F012af357fc8dd3a84a0d304fabb403.jpg%401280w_1l_2o_100sh.jpg&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652853134&t=12f91b08dd9dfe973a5f809401239c5d" alt="">

        </van-swipe-item>
        <van-swipe-item>
          <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.90sheji.com%2Fdesign%2F00%2F01%2F50%2F57%2Fdcb8b7af060459b0d0c63ad0f75072d0.jpg%21%2Ffwfh%2F1920x0%2Fclip%2F0x1275a0a0%2Fquality%2F90%2Funsharp%2Ftrue%2Fcompress%2Ftrue%2Fwatermark%2Furl%2FLzkwX3dhdGVyX3Y2LnBuZw%3D%3D%2Frepeat%2Ftrue&refer=http%3A%2F%2Fpic.90sheji.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652853507&t=c4d6312abaac7c8d23c3bb13599260d6" alt="">

        </van-swipe-item>
        <van-swipe-item>
          <img src="https://img0.baidu.com/it/u=3597288324,3683745242&fm=253&fmt=auto&app=120&f=JPEG?w=830&h=432" alt="">

        </van-swipe-item>
      </van-swipe>
    </div>

    <div class="sort">
      <div class="sortItem" v-for="item of store.state.sortItemList.sortItemList" :key="item.id">
        <img :src="item.imgUrl" alt="">
        <div class="sortItem-name">{{item.title}}</div>
      </div>

    </div>

    <div class="product">
      <div class="productItem" v-for="item of store.state.productItemList.productItemList" :key="item.id">
        <img :src="item.imgUrl" alt="">
        <div class="produceItem-name">{{item.name}}</div>
        <div class="produceItem-price">￥{{item.price}}<p>￥{{item.oldPrice}}</p></div>
      </div>

    </div>
  </div>
</template>

<script>
import { useRouter } from 'vue-router'
import { ref } from 'vue';
import { Toast } from 'vant';
import { useStore } from 'vuex'


export default {
  setup() {
    const router = useRouter() 

    const store = useStore()

    const toSearch = () => {
      router.push({path:'/search'})
    }

    const show = ref(false);
    const actions = [
      { name: '客服' },
      { name: '卡券' },
      { name: '地址管理' },
      { name: '心愿单' },
    ];
    const onSelect = (item) => {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      show.value = false;
      Toast(item.name);
    };

    return {
      toSearch,
      show,
      actions,
      onSelect,
      store
    }
  }
}
</script>

<style scoped>
.contain{
 
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
}
.header{
  width: 100%;
  height: 28px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px; 
}
.inputContain{
  display: flex;
  width: 67%;
  z-index: 3;
}
.picture{
  width: 15%;
  height: 100%;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  background: rgb(243, 241, 241);

}
.picture img{
  /* height: 100%; */
  width: 90%;
}
input{
  background: rgb(243, 241, 241);
  border: none;
  width: 85%;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
}
.cart,
.order,
.more{
  width: 23px;
  height: 23px;
  line-height: 23px;
}
img{
  width: 100%;
}

.my-swipe .van-swipe-item {
  color: #000;
  height: 130px;
}
.van-swipe-item img{
  width: 100%;
  height: 130px;

}

.sort{
  margin-top: 15px;
  width: 100%;
  height: 150px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.sortItem{
  width: 19%;
  height: 70px;
  text-align: center;
}
.sortItem img{
  width: 40px;
  height: 40px;
}
.sortItem-name{
  margin-top: 5px;
  font-size: 12px;
  letter-spacing: 1px;
  text-align: center;
  font-weight: 400;
}

.product{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 50px;
}
.productItem{
  width: 49%;
  height: 250px;
  margin-bottom: 5px;
  box-shadow: 0 0 8px rgb(226, 225, 225);
  border-radius: 5px;
}
.productItem img{
  width: 100%;
  height: 160px;
  background-color: rgb(36, 35, 117);
}
.produceItem-name{
  width: 100%;
  height: 52px;
  line-height: 21px;
  letter-spacing: 1px;
  box-sizing: border-box;
  padding: 7px 7px;
  overflow: hidden;
  font-size: 14px;
  font-weight: 500;
}
.produceItem-price{
  display: flex;
  width: fit-content;
  margin: 5px 6px;
  font-size: 18px;
  font-weight: bold;
}
p{
  margin: 2px 7px;
  font-size: 15px;
  font-weight: 200;
  text-decoration: line-through;
  color: gray;
}


.content {
  padding: 16px 16px 18px;
  display: flex;
  flex-wrap: wrap;
}
.moreItem{
  width: 50px;
  height: 60px;
  text-align: center;
  margin: 20px 9px;
}
.moreItem-picture{
  border-radius: 50%;
  width: 90%;
  height: 45px;
  background-color: #fff;
}
.moreItem-picture img{
  margin-top: 5px;
  width: 70%;
  height: 70%;
}
.moreItem-name{
  width: 100%;
  margin-top: 10px;
  font-size: 12px;
}
</style>